<!--
 * @Author: wurangkun wurangkun@qq.com
 * @Date: 2023-05-05 17:36:58
 * @LastEditors: wurangkun wurangkun@qq.com
 * @LastEditTime: 2023-05-08 15:12:28
 * @FilePath: \myblog\src\components\search\search.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import { FontIcons } from '@/enum';

</script>
<template>
  <!-- <div class="input-container">
    <input placeholder="Search something..." class="input" name="text" type="text">
    <div class="h48px w48px icon ">
      <Icon :icon="FontIcons.搜索" class="search_icon"></Icon>
    </div>
  </div> -->
  <div class="input-wrapper">
  <button class="icon"> 
    <div class="h32px w32px">
      <Icon :icon="FontIcons.搜索" class="search_icon"></Icon>
    </div>
  </button>
  <input placeholder="search.." class="input" name="text" type="text">
</div>
</template>

<style scoped lang="scss">.input-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  position: relative;
}

.input {
  border-style: none;
  height: 50px;
  width: 50px;
  padding: 10px;
  outline: none;
  border-radius: 50%;
  transition: .5s ease-in-out;
  background-color: rgb(216 229 234);
  box-shadow: 0px 0px 3px #f3f3f3;
  padding-right: 40px;
  color: #333;
}

.input::placeholder,
.input {
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 17px;
}

.input::placeholder {
  color: #8f8f8f;
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0px;
  cursor: pointer;
  width: 50px;
  height: 50px;
  outline: none;
  border-style: none;
  border-radius: 50%;
  pointer-events: painted;
  background-color: transparent;
  transition: .2s linear;
}

.icon:focus ~ .input,
.input:focus {
  box-shadow: none;
  width: 250px;
  border-radius: 0px;
  background-color: transparent;
  border-bottom: 3px solid #d60909;
  transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
}


</style>